<template>
  <div class="userList back-white">
    <div>
      <page-title>分享图片列表</page-title> 
    </div>  
    <div class="search-box"> 
      <el-button type="primary" @click="addPhoto">添加分享图片</el-button>  
    </div> 
    <div class="content clear-both "> 
      <div class="photo-group float-left" v-for="(item,index) in videoDataList" @click="ditailPhoto(item)" :key="index">
        <div class="img-box">
          <img v-lazy="item.link">
        </div> 
        <p class="text-center">{{item.sex==1?'男':'女'}}</p>
        <div class="info text-center" >  
          <el-button type="danger" class="btn-size" @click.stop="deletePhoto(item)">删除</el-button> 
        </div>
      </div> 
      <div class="photo-group float-left"  v-if="videoDataList.length>0">
        <div class="img-box update-box">
          
        </div>  
      </div> 
      <div class="text-center" v-if="videoDataList.length==0">暂无数据</div>

    </div>  
    <div class="text-center">
      <el-pagination 
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="pageCount">
      </el-pagination>
    </div> 
    <el-dialog title="添加分享图片" center :visible.sync="dialogFormVisible" width="800px"> 
      <div class="dialog-content clear-both">
        <div>
          <div class="photo-group"> 
            <div class="img-box" v-for="(item,index) in addImgLink" :key="item">
              <img v-lazy="item">
              <div class="text-center">
                <el-button type="danger" class="btn-size" @click.stop="deleteAddlink(item,index)">删除</el-button>
              </div>
               
            </div> 
            <update-img  @change="addImgEvent" ></update-img>    
          </div>
        </div> 
      </div>
      <div class="text-center" style="margin-top:20px;">
        <el-radio v-model="radio" :label="1">男</el-radio>
        <el-radio v-model="radio" :label="2">女</el-radio>
      </div>
      <div slot="footer" class="dialog-footer"> 
          <el-button type="primary" @click="addPhotoList">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script >
  import * as api from './../../../api/api';
  export default {
    data(){
      return {     
        videoDataList: [], //用户列表  
        pageCount:0,
        page_num:1,
        page_size:30,

        dialogFormVisible:false, 
        addImgLink:[ ],
        radio:1,
      }
    },
    created(){
      this.getPhotowallListData(); 
    },
    methods:{ 
      //获取用户列表数据
      getPhotowallListData(){ 
        let vm = this;
        let body={
          page:vm.page_num, 
          size:vm.page_size, 
        } 
        vm.videoDataList=[];
        api.getShareData(body).then(res=>{  
            if(res.data.code==300000&&res.data.data){ 
              res.data.data.data?vm.videoDataList=res.data.data.data:vm.videoDataList=[];  
              vm.pageCount=res.data.data.info.total; 

            }
        })
      },   
      currentChange(e){
        this.page_num = e;
        this.getPhotowallListData();
      },
       //上传图片
      addImgEvent(val){  
          this.addImgLink.push(val);
      },
      //删除照片
      deletePhoto(item){
        let vm = this;
        api.deleteSharePhoto({link:item.link,id:item.id}).then(res=>{
          if(res.data.code==300000){
            vm.getPhotowallListData();
          }
        })
      },
      deleteAddlink(item,index){ 
        let vm = this;
        api.aliyunPhotoDelete({link:item}).then(res=>{
          if(res.data.code==300000){
            vm.addImgLink.splice(index,1);
          }
        })
      },
      addPhoto(){
        this.dialogFormVisible=true;
        this.addImgLink=[];
      },
      //提交
      addPhotoList(){
        let vm = this;
        if(vm.addImgLink.length>0){
          api.addSharePhoto({links:vm.addImgLink,sex:vm.radio}).then(res=>{
            if(res.data.code==300000){
              vm.dialogFormVisible=false;
              vm.getPhotowallListData();
            }
          });
        }else{
          Message({
            showClose: true,
            message: '请选择照片'
          })
        } 
      },

    }
  }
</script>
<style lang="scss" scoped>
    .search-box{
      padding:20px 0 0 45px;
    }
    .content{
      width:100%;
      height:100%;
      padding:20px;
      .photo-group{ 
        height:280px;
        margin-left:25px;
        margin-bottom:25px; 
        border-radius:6px;
        cursor:pointer;
        .img-box{
          width:170px;
          height:200px;
          position:relative;
          .state{
            position:absolute; 
            border-radius:6px;
            top:0;
            left:0;
            width:100%;
            height:100%;
            // top:50%;
            // left:50%;
            // margin-top:-20px;
            // margin-left:-35px;
            // width:70px;
            // height:36px;
            line-height:200px;
            font-size:22px;
            font-weight:bold;
            color:#67C23A;
            background:rgba(64,158,255,.3);
          }
          img{
            width:100%;
            height:100%;
            border-radius:6px;
          }
        } 
        .update-box{
          padding-top:50px;
          margin-left:40px;
        }
        .info{  
          width:170px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          .btn-size{ 
            padding: 6px 10px !important;
            margin-top:20px;
          }
        }
      }
    } 
    .dialog-content{
      .photo-group{
        padding-top:10px;
        .img-box{
          display:inline-block;
          width:135px;
          // height:135px;
          margin-right:5px;
          img{
            width:100%;
            // height:100%;
          } 
        }
        .btn-size{ 
          padding: 6px 10px !important;
          margin-top:5px;
        }
      } 
    }
    
</style>